<template>
	<view class="user-info">
		<!-- 头像图片区域 -->
		<view class="head-img">
			<view class="head" @tap="uploadImag()">
				<u-avatar :src="userInfo.avatar" size="229upx"></u-avatar>
				<image src="/static/modification.png" mode=""></image>
				<!-- 修改图像图标 -->
				<!-- <template v-if="[1,2].includes(userInfo.sex)">
					<image src="sexImg[userInfo.sex-1]" mode=""></image>
				</template> -->
			</view>
		</view>
		<!-- 头像文字 -->
		<view class="head-text">
			<view class="text-word">
				<text>{{userInfo.username}}</text>
				<!-- 区块链 -->
				<!-- <view class="head-text-bottom">
					<text>区块链地址：</text>
					<text>{{userInfo.blockchainAddr}}</text>
				</view> -->
			</view>
		</view>
		<!-- 列表区域 -->
		<u-cell-group :border="false" class="u-cell-group-all" customStyle="{'height':'118rpx'}">
			<u-cell size="large" title="昵称"
				titleStyle="{font-size: 28rpx; font-family: PingFang SC; font-weight: bold;}" :value="userInfo.username"
				:isLink="true" url="../user/changeName">
			</u-cell>
			<u-cell size="large" title="居民卡编号"
				titleStyle="{font-size: 28rpx; font-family: PingFang SC; font-weight: bold;}" :value="userInfo.code">
				<view slot="value" class="u-slot-value u-slot-value-gender">
					<text>{{userInfo.code}}</text>
				</view>
			</u-cell>
			<u-cell size="large" title="签名"
				titleStyle="{font-size: 28prx; font-family: PingFang SC; font-weight: bold;}" :isLink="true"
				url="../user/changeSign">
				<view slot="value" class="u-slot-value-sign" :style="userInfo.sign ? '' : 'color:#8F9091;'">
					<view class="text-right">{{userInfo.sign || '他还没有留下想说的话~'}}</view>
				</view>
			</u-cell>
			<u-cell size="large" title="性别" @click="reserved()"
				titleStyle="{font-size: 28rpx; font-family: PingFang SC; font-weight: bold;}" :isLink="true">
				<view slot="value">
					<text v-if="userInfo.sex > 0">{{sexList[userInfo.sex - 1]}}</text>
				</view>
			</u-cell>
			<u-cell size="large" title="手机号码" @click="showPopup"
				titleStyle="{font-size: 28rpx; font-family: PingFang SC; font-weight: bold;}"
				:isLink="!userInfo.isMobileAuth">
				<view slot="value" class="u-slot-value">
					<text>{{userInfo.mobile}}</text>
					<view class="certified" v-if="userInfo.isMobileAuth">
						<image src="../../static/yirenzheng.png" mode="" class="test"></image>
						<text>已认证</text>
					</view>
				</view>
			</u-cell>
			<u-cell size="large" title="身份证" @click="handleAttest"
				titleStyle="{font-size: 28rpx; font-family: PingFang SC; font-weight: bold;}"
				:isLink="!userInfo.isCardAuth || isAttestErr">
				<view slot="value" class="u-slot-value">
					<view v-if="isAttestErr" class="f-base" style="color: #FF8E2A;">
						实名认证信息有误，请重新认证
					</view>
					<template v-else-if="userInfo.isCardAuth">
						<text>{{userInfo.card}}</text>
						<view class="certified">
							<image src="../../static/yirenzheng.png" mode="" class="test"></image>
							<text>已认证</text>
						</view>
					</template>
					<view class="certifiedErr" v-else>
						<text>去实名</text>
					</view>
				</view>
			</u-cell>
		</u-cell-group>
		<!-- 注 -->
		<view class="note">
			<text>注：根据国家相关法律规定，实名认证后才能生成区块链地址</text>
		</view>
		<!-- 选择性别弹窗 -->
		<view>
			<u-action-sheet :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true" round="20rpx"
				@select="selectClick" :show="showSheet" @close="showSheet=false" cancelText="取消">
			</u-action-sheet>
		</view>
		<!-- 一年一次修改确定弹框 -->
		<popup :title="popupName" ref="popupRef" @reserved="handleClick(userInfo.isMobileAuth, 'changePhoneNumber')">
		</popup>
	</view>
</template>

<script>
	import {
		userAccount,
		userUpdate
	} from '@/api/user.js'
	import {
		beforeUploadingApi
	} from '../../api/index.js'
	import {
		mapMutations
	} from "vuex"
	import popup from './common/popup.vue'
	import AttestStatus from '@/common/mixin/attestError.js'
	export default {
		mixins: [AttestStatus],
		components: {
			popup
		},
		data() {
			return {
				userInfo: {},
				popupName: '',
				src: '/static/logo.png',
				show: false,
				showSheet: false,
				list: [{
						name: '男',
						type: 1
					},
					{
						name: '女',
						type: 2
					},
					{
						name: '保密',
						type: 3
					}
				],
				show: false,
				sexList: ["男", "女", "保密", "未认证"]
			};
		},
		onBackPress(options) {
			if (options.from == 'backbutton') {
				uni.redirectTo({
					url: '/pages/user/user'
				})
			}
		},
		// onShow() {
		// 	this.onDataUpdate();
		// },
		methods: {
			...mapMutations(['SET_USER_INFO']),
			//上传头像
			uploadImag() {
				uni.showActionSheet({
					itemList: ['从相册选择'],
					success: (res) => {
						let index = res.tapIndex;
						if (index == 0) {
							//选择头像上传
							uni.chooseImage({
								count: 1,
								sizeType: ["compressed"],
								sourceType: ["album"],
								success: (chooseItem) => {
									var filePath = chooseItem.tempFilePaths[0];
									//获取上传地址
									this.upreleaseClick(filePath);

								}
							})
						}
					}
				})
			},
			//传入七牛云 返回给后端url
			async upreleaseClick(filePath) {
				let resT = await beforeUploadingApi()
				let url = await this.uploadService(resT.data, filePath)
				let avatarUrl = resT.data.domain + url.key
				let {
					username,
					sex
				} = this.userInfo
				let ints = await userUpdate({
					"avatar": avatarUrl,
					username,
					sex: sex || 1,
				});
				if (ints.code === 200) {
					uni.showToast({
						title: '上传成功',
						icon: 'none'
					})
					try {
						const res = await userAccount({})
						this.userInfo = res.data
						console.log(JSON.stringify(res.data))
						this.$store.dispatch('getUserInfo')
					} catch (err) {
						console.log(err)
					}
				}
			},
			//上传服务器
			async uploadService(item, img) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: item.upload_url,
						filePath: img,
						name: 'file',
						formData: {
							'token': item.upload_token,
							'key': (new Date().getTime()).toString()
						},
						success: (res) => {
							if (res.statusCode < 200 || res.statusCode > 300) {
								reject('statusCode is not 200 series')
							} else {
								resolve(JSON.parse(res.data))
								console.log(res, '上传成功回调')
							}
						},
						fail: (err) => {
							reject(err)
							console.log(err)
						}
					})
				})
			},

			//修改性别
			async selectClick(item) {
				let {
					username,
					sex
				} = this.userInfo
				let ints = await userUpdate({
					username,
					sex: item.type
				});
				try {
					const res = await userAccount({})
					this.userInfo = res.data
					uni.showToast({
						title: '修改成功！',
						icon: 'none'
					})
					this.$store.dispatch('getUserInfo')
				} catch (err) {
					console.log(err)
				}
			},
			//弹出确定修改弹窗
			showPopup() {
				if (!this.userInfo.isMobileAuth) {
					this.$refs.popupRef.open()
					this.popupName = '一年只可修改一次，确定修改吗？'
				}
			},
			reserved() {
				this.$refs.popupRef.close()
				this.showSheet = true
			},
			handleClick(bool, name) {
				if (!bool) {
					uni.navigateTo({
						url: `/pages/user/${name}`
					})
				}
			},
			handleAttest() {
				if (this.isAttestErr) {
					this.toAttestAgin()
				} else if (!this.userInfo.isCardAuth) {
					uni.navigateTo({
						url: './realName'
					})
				}
			}
		},
		async onShow() {
			try {
				const res = await userAccount({})
				this.userInfo = res.data
				console.log(JSON.stringify(res.data))
			} catch (err) {
				console.log(err)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-slot-value-gender {
		padding-right: 38rpx;
	}

	.u-gap {
		hight: 0 !important;
	}

	.user-info {
		height: 100%;
		background: linear-gradient(#E7F0F8, transparent, transparent);

		.head-img {
			display: flex;
			justify-content: center;

			.head {

				position: relative;
				width: 229rpx;
				height: 229rpx;
				margin-top: 84rpx;

				&>image {
					width: 54rpx;
					height: 54rpx;
					position: absolute;
					bottom: 6rpx;
					right: 6rpx;
				}
			}
		}

		.head-text {
			display: flex;
			justify-content: center;
			margin-top: 37rpx;

			.text-word {
				text-align: center;

				&>text:first-child {
					font-size: 36rpx;
					font-weight: bold;
				}

				.head-text-bottom {
					margin-top: 29rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}

		.u-cell-group-all {
			padding: 62rpx 40rpx 0 40rpx;
			font-size: 28rpx;

			.u-slot-value-sign {
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.u-slot-value {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.certifiedErr {
					margin-left: 21rpx;
					background: rgba(255, 146, 148, 0.1);
					border-radius: 30rpx;
					padding: 8rpx 26rpx;
					font-size: 20rpx;

					text {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ff3a3d;
					}

					.test {
						position: relative;
						top: 4rpx;
					}
				}

				.certified {
					margin-left: 21rpx;
					background: rgba(69, 148, 255, 0.1);
					border-radius: 30rpx;
					padding: 12rpx 20rpx;
					font-size: 20rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						margin-left: 9rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #4594FF;
					}

					.test {
						position: relative;
						top: 4rpx;
					}
				}
			}

		}

		.note {
			padding: 151rpx 40rpx 0 40rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8F9091;

			&>text {
				display: inline-block;
				padding: 0 3rpx 0 5rpx;
			}
		}
	}
</style>